<template>
  <div class="tab-content">
    <h2>选择框</h2>
    <select v-model="selected" class="select-box">
      <option disabled value="">请选择</option>
      <option v-for="option in options" :key="option" :value="option">
        {{ option }}
      </option>
    </select>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const selected = ref('')
const options = ['选项一', '选项二', '选项三']
</script>

<style lang="scss" scoped>
.select-box {
  width: 100%;
  padding: 12px;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  font-size: 1rem;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s;
}

.select-box:focus {
  border-color: #4361ee;
  outline: none;
}
</style>